<template>
	<view class="bf" v-if="!detail.skuInfoVo">
		  <u-empty mode="data"></u-empty>
	</view>
	<view class="bf" v-else>
		<u-navbar :is-back="true" :border-bottom="false" class="navbar">商品详情</u-navbar>
		<scroll-view scroll-y class="bf-sv">
			<view class="bf-content">
				<!-- 商品轮播图 -->
				<u-swiper :list="swiperList" :height="500" mode="dot"></u-swiper>

				<!-- 商品缩略图及属性还有价格购买数量的显示 -->
				<view class="u-flex u-type-info-light u-p-20 bf-content-price">
					<view class="u-p-r-20">
						<ListImgItem :src="getDetail.imgUrl" width="120rpx" height="120rpx"
							:showLeft="getDetail.skuType===1" :showRight="false"
							:showBottom="getDetail.isNewPerson===1">
						</ListImgItem>
					</view>
					<!-- 区别秒杀商品与一般商品的价格体系 -->
					<!-- 秒杀商品显示 -->

					<block v-if="getDetail.skuType===1">
						<view>
							<view class="bf-content-price-current u-flex">
								<view>秒杀价格：￥{{getDetail.seckillSkuVo.seckillPrice}}</view>
								<view class="u-p-l-20">市场价格：￥{{getDetail.marketPrice}}</view>
							</view>
							<view class="bf-content-price-limit">
								<view>
									限购：{{getDetail.seckillSkuVo.seckillLimit}} 件
									销售：{{getDetail.seckillSkuVo.seckillSale}} 件
									库存：{{getDetail.seckillSkuVo.seckillStock}} 件
								</view>
								<view>
									秒杀场次：{{getDetail.seckillSkuVo.timeName}} 倒计时：
									<u-count-down ref="seckillCountDown" :timestamp="secKillSeconds" @end="secKillEnd"></u-count-down>
								</view>
							</view>
						</view>
					</block>

					<!-- 普通商品显示 -->
					<block v-else>
						<view>
							<view class="bf-content-price-current u-flex">
								<view>当前价格：￥{{getDetail.price}}</view>
								<view class="u-p-l-20">市场价格：￥{{getDetail.marketPrice}}</view>
							</view>
							<view class="bf-content-price-limit">
								<view>限购数量：{{getDetail.perLimit}}件</view>
							</view>
						</view>
					</block>
				</view>

				<!-- 商品名称 -->
				<view class="u-m-20 u-p-20 bf-content-container">
					<view class="u-flex">{{getDetail.skuName}}</view>
				</view>

				<!-- 属性列表 -->
				<view class="u-m-20 u-p-20 bf-content-container" v-if=" getDetail.skuAttrValueList.length > 0">
					<view class="u-p-t-5" v-for="i in getDetail.skuAttrValueList" :key="i.id">
						{{i.attrName}}：{{i.attrValue}}</view>

				</view>

				<!-- 活动规则 -->
				<view class="u-m-20 u-p-20 bf-content-container" v-if="detail.activityRuleList.length > 0">
					<view class="u-p-t-5" v-for="i in detail.activityRuleList" :key="$u.guid()">{{i.ruleDesc}}</view>

				</view>

				<!-- 售后与提货地址 -->
				<view class="u-m-20 u-p-20 bf-content-container">
					<view class="u-flex">
						<view class="u-font-sm u-m-r-20 u-type-info">售后无忧</view>
						<view class="u-font-sm u-m-r-20 u-flex-1">
							支持保价
							<text class="u-type-error">・</text>
							极速退款
							<text class="u-type-error">・</text>
							7天无理由退货
						</view>
						<u-icon name="arrow-right" size="24" class="u-m-r-20 u-type-info"></u-icon>
					</view>

					<view class="u-flex u-m-t-20">
						<view class="u-font-sm u-m-r-20 u-type-info">提货信息</view>
						<view class="u-font-sm u-m-r-20 u-flex-1">
							<view>
								现在下单，
								<text class="u-type-error">明天16:00可提货</text>
							</view>
							<view>提货点:{{leaderAddressVo.takename?leaderAddressVo.takeName:'请设置提货点'}}</view>
						</view>
						<u-icon name="arrow-right" size="24" class="u-m-r-20 u-type-info"></u-icon>
					</view>
				</view>

				<!-- 商品详情图片清单 -->
				<view class="u-m-20 u-p-20 bf-content-container" v-if="skuPosterList.length>0">
					<image :src="item.image" v-for="item in skuPosterList" :key="$u.guid()"></image>

				</view>
				<u-gap height="30"></u-gap>
			</view>
		</scroll-view>
		<!-- 底部导航 -->
		<view class="bf-navigation">
			<view class="navigation">
				<view class="left">
					<view class="item" @click="gotoHome">
						<!-- 这里的$u.color['contentColor']是颜色值的一种表示方式 -->
						<u-icon name="home-fill" :size="40" :color="$u.color['contentColor']"></u-icon>
						<view class="text u-line-1">首页</view>
					</view>
					<view class="item car">
						<u-badge class="car-num" :count="getProductSkuNum(skuId)" type="error" :offset="[-3, -6]"></u-badge>
						<u-icon name="shopping-cart-fill" :size="40" :color="$u.color['contentColor']"></u-icon>
						<view class="text u-line-1">购物车</view>
					</view>

					<view class="item car" v-if="detail.couponInfoList.length > 0"
					@click="showCouponList =true">
						<u-badge class="car-num" :count="detail.couponInfoList.length" type="error" :offset="[-3, -6]">
						</u-badge>
						<u-icon name="gift-fill" :size="40" :color="$u.color['contentColor']"></u-icon>
						<view class="text u-line-1">优惠券</view>
					</view>
				</view>
				<!-- 即将秒杀与加入购物车的显示 -->
				<view class="right u-p-r-10 u-flex"  v-if="!secKillEnded">
					<!-- 即将开抢 -->
					<block v-if="getDetail.seckillSkuVo.timeStaus === 3">
						<view class="u-m-r-20 u-line-1  u-flex-1 u-text-center">场次:{{getDetail.seckillSkuVo.timeName}}</view>
						<view class="buy-disabled btn u-line-1">即将开抢</view>
					</block>
					<!-- 加入购物车 -->
					<block v-else>
						<view class="u-m-r-20 u-line-1  u-flex-1">
							<AddToCart></AddToCart>
						</view>
						<view class="buy btn u-line-1">立即购买</view>
					</block>
				</view>
				<!-- 秒杀结束显示 -->
				
				<view class="right u-p-r-10 u-flex" v-else>
					<view class="u-m-r-20 u-line-1 u-flex-1"></view>
					<view class="buy-disabled btn u-line-1">秒杀结束</view>
				</view>
			</view>
		</view>
		<!-- 优惠券  是个组件-->
		<!-- @getCouponInfo="getCouponInfo" 暂时绑定的事件有问题 -->
		<coupon :showCouponList.sync="showCouponList" :couponList="detail.couponInfoList"
		
		></coupon>
		<!--  -->
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters
	} from "vuex"
	export default {
		data() {
			return {
				detail: {},
				skuId: 0 ,//当前商品id
				secKillSeconds:0,//秒杀时间
				secKillEnded:false,//秒杀结束标志
				showCouponList:false,//显示优惠券列表
				
			};
		},
		computed: {
			// 获取该当前提货点
			...mapState("pickUpLocationModule", ["leaderAddressVo"]),
			// 获取该商品在购物车的数量
			...mapGetters("cartModule", ["getProductSkuNum"]),
			// 轮播图
			swiperList() {
				let list = []
				this.detail.skuInfoVo &&
					this.detail.skuInfoVo.skuImagesList.length > 0 &&
					this.detail.skuInfoVo.skuImagesList.forEach(item => {
						list.push({
							image: item.imgUrl,
							title: item.imgName
						})
					})
				return list
			},
			// 详情图
			skuPosterList() {
				let list = []
				this.detail.skuInfoVo &&
					this.detail.skuInfoVo.skuPosterList.length > 0 &&
					this.detail.skuInfoVo.skuPosterList.forEach(item => {
						list.push({
							image: item.imgUrl,
							title: item.imgName
						})
					})
				return list
			},
			//获取秒杀
			getDetail() {
				return {
					...this.detail.skuInfoVo,
					seckillSkuVo: this.detail.seckillSkuVo,
				};
			},
		},
		methods: {
			// 获取商品信息
			async getProductData(skuId) {
				let res = await this.$u.api.getHomeItem({
					skuId
				})
				this.detail = res
				//如果商品是秒杀商品需要计算倒计时时间
				if(this.detail.skuInfoVo.skuType===1){
					const now = this.$dayjs()
					
					//将秒杀结束时间格式化
					const endTime = this.$dayjs(this.$dayjs().format('YYYY-MM-DD')+' '+this.detail.seckillSkuVo.endTime)
					//使用diff比较差异
					const dsecond = endTime.diff(now,'second')
					this.secKillSeconds = dsecond
					
				}
			},
			//回到首页
			gotoHome(){
				uni.switchTab({
					url:'/pages/index/index'
				})
				return false//记得取消后摇
			},
			//秒杀倒计时结束
			secKillEnd(){
				// 秒杀结束状态
				this.secKillEnded = true
				
			},
			//领取优惠券
			async getCouponInfo(id){
				// console.log(id);
				/* try{
					const res = await this.$u.api.getCouponInfo({id})
					//找到是第几张优惠券触发了领取事件
					// const pos = this.detail.couponInfoList.findIndex(item=>item.id===id)
					//响应式更新对应优惠券的状态
					// this.$set(this.detail.couponInfoList[pos],'couponStatus',1)
				}catch(e){
					console.log(e)
				} */
			}
				
		},
		onLoad(options) {
			// console.log(options)
			let skuId = +options.skuId;
			this.skuId = skuId;
			this.getProductData(skuId)
		}
	}
</script>

<style lang="scss">
	.bf {
		height: 100%;

		&-sv {
			height: calc(100vh - 116rpx - 102rpx);
		}

		&-content {
			background-color: $u-bg-color;

			&-price {
				background: linear-gradient(to right,
						rgb(255, 180, 61),
						rgb(255, 101, 0));
			}

			&-container {
				z-index: 9999;
				background-color: #fff;
				border-radius: 25rpx;
			}
		}

		&-navigation {
			position: fixed;
			bottom: 0;
			width: 100%;

			.navigation {
				display: flex;
				border: solid 2rpx #f2f2f2;
				background-color: #ffffff;
				padding: 16rpx 0;
				justify-content: space-around;

				.left {
					display: flex;
					font-size: 20rpx;

					.item {
						margin: 0 30rpx;

						&.car {
							text-align: center;
							position: relative;

							.car-num {
								position: absolute;
								top: -10rpx;
								right: -10rpx;
							}
						}
					}
				}

				.right {
					width: 375rpx;
					display: flex;
					font-size: 28rpx;
					align-items: center;

					.btn {
						line-height: 50rpx;
						padding: 0 30rpx;
						border-radius: 36rpx;
						color: #ffffff;
					}

					.buy {
						background-color: #ff7900;
					}

					.buy-disabled {
						background-color: $u-type-info;
					}
				}
			}
		}
	}
</style>
